/* 设置页面的背景图，并将其放置在页面的底部 */
body {
    background-image: url('../img/场景/背景_2.png'); /* 替换 'your-image.jpg' 为您的底图文件路径 */
    background-size: cover; /* 让背景图自适应填充整个页面 */
    background-repeat: no-repeat; /* 防止背景图重复显示 */
    background-attachment: fixed; /* 固定背景图，使其在滚动页面时保持不变 */
    background-position: center center; /* 将背景图水平和垂直居中 */
    font-family: "微软雅黑", Arial, sans-serif;
  }
  
  /* 设置页面内容的样式 */
  .content {
    /* 添加您的内容样式，例如文字颜色、字体等 */
    color: #ffffff; /* 设置文字颜色为白色 */
    font-family: Arial, sans-serif; /* 设置字体 */
    /* 添加其他内容样式 */
  }
  
  /* ——————————————————————————————————————————背景云的特效—————————————————————————————————————————— */
  .dynamic-area1   {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/动效/云_1.png) repeat-x 0px 0px;
    background-size: cover;
    animation: posterDrop1 6000s linear infinite;
  }
  
  @keyframes posterDrop1 {
    from { background-position: 0 0; }
    to { background-position: 4000% 0; }
  }
  
  .dynamic-area2   {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/动效/云_2.png) repeat-x 0px 0px;
    background-size: cover;
    animation: posterDrop2 8000s linear infinite;
  }
  
  @keyframes posterDrop2 {
    from { background-position: 0 0; }
    to { background-position: 30000% 0; }
  }
  /* ——————————————————————————————————————————背景云的特效—————————————————————————————————————————— */

    /* ——————————————————————————————————————————边框样式—————————————————————————————————————————— */

  .biankuang   {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;    /* 设置上下内边距为4px，左右内边距为10px */
    box-sizing: border-box; /* 让边框盒模型生效 */
    top: 0; /* 从顶部偏移50% */
    left: 0; /* 从左侧偏移50% */
    border-style: solid;    /* 使用图片作为边框图像源 */
    border-image-source: url('../img/素材/边框.png');
    border-image-slice: 125 125 125 125 fill;    /* 定义边框图像的分割方式（顺时针顺序：上、右、下、左） */
    border-image-width: 125px 125px 125px 125px;    /* 定义边框图像的宽度（顺时针顺序：上、右、下、左） */
    background-color: transparent;    /* 设置背景颜色为透明 */
    color: #0f0f0f;    /* 设置文本颜色为#0f0f0f */



    z-index: 9999; 
  }

  /* ——————————————————————————————————————————登录界面—————————————————————————————————————————— */

/* 登录容器 */
.login-container-1 {
    width: 70%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;    /* 设置背景颜色为透明 */
}

.login-biaoti {
    text-align: center; /* 设置文本水平居中对齐 */
    font-family: "华文行楷", cursive; /* 设置字体为华文行楷，如果系统中没有该字体，使用cursive作为回退字体 */
    font-size: 7vw; /* 设置字体大小为24像素 */
    color: rgb(48, 48, 48); /* 设置字体颜色为灰色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 添加文本阴影，水平和垂直偏移2像素，模糊半径4像素，颜色为深灰色（透明度为0.3） */
    vertical-align: top;
    margin-top: 0;
}

.login-container-2 {
  
    width: 60%;
    height: auto;
    position: absolute;    /* 设置上下内边距为4px，左右内边距为10px */
    box-sizing: border-box; /* 让边框盒模型生效 */
    padding: 4px 10px;
    top: 50%; /* 从顶部偏移50% */
    left: 50%; /* 从左侧偏移50% */
    transform: translate(-50%, -50%); /* 使用transform属性居中容器 */
    border-style: solid;    /* 使用图片作为边框图像源 */
    border-image-source: url('../img/素材/底图_通用.png');
    border-image-slice: 125 125 125 125 fill;    /* 定义边框图像的分割方式（顺时针顺序：上、右、下、左） */
    border-image-width: 100px 100px 100px 100px;    /* 定义边框图像的宽度（顺时针顺序：上、右、下、左） */
    background-color: transparent;    /* 设置背景颜色为透明 */
    color: #0f0f0f;    /* 设置文本颜色为#0f0f0f */

    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.479); /* 添加投影效果，创建浅灰色阴影 */

}

/* 登录标题 */
.login-title {
    text-align: center;
    font-size: 2vw; /* 设置字体大小为24像素 */
    margin-bottom: 20px;
}

/* 输入框样式 */
.input-field-1 {
    display: flex; /* 使用弹性盒子布局，让内部元素排列为一行 */
    box-sizing: border-box; /* 让边框盒模型生效 */
    width: 80%;
    height: 15%;
    border: none; /* 取消默认边框 */
    border-style: solid; /* 使用图片作为边框图像源 */
    border-image-source: url('../img/素材/编辑框_通用.png');
    border-image-slice: 14 fill; /* 定义边框图像的分割方式，上下左右均为14像素填充 */
    border-image-width: 14px; /* 定义边框图像的宽度 */
    background-color: transparent; /* 设置背景颜色为透明 */
    color: #0f0f0f; /* 设置文本颜色为#0f0f0f */
    margin: 0px 10% 3% 10%; /* 设置上、右、下、左边距*/

}

.input-field-2 {
    flex: 1; /* 设置搜索框元素在弹性容器中占据剩余的可用空间 */
    padding: 3%; /* 给搜索框添加内边距为 8 像素 */
    border: none; /* 去除搜索框的边框，使其和外层容器看起来更像一个整体 */
    outline: none; /* 去除搜索框的默认外发光效果 */
    background: transparent; /* 设置搜索框的背景为透明，让外层容器的背景颜色显示出来 */
    font-size: 1.5vw; /* 设置字体大小为24像素 */
}


.login-button {
    width: 20%;  
    height: 40%;
    border-image-source: url('../img/素材/按钮-正常.png'); /* 使用图片作为边框图像源 */
    border-image-slice: 25 25 25 25 fill;    /* 定义边框图像的分割方式（顺时针顺序：上、右、下、左） */
    border-image-width: 25px 25px 25px 25px;    /* 定义边框图像的宽度（顺时针顺序：上、右、下、左） */
    text-decoration: none; /* 去除链接的下划线样式 */
    text-align: center; /* 文本居中对齐 */
    color: #000000; /* 文本颜色 */
    font-size: 1.5vw; /* 设置字体大小为24像素 */
    font-weight: bold; /* 文本加粗 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    margin: 2% 14% 5% 14%; /* 设置上、右、下、左边距*/
}

/* 登录按钮悬停效果 */
.login-button:hover {
    border-image-source: url('../img/素材/按钮-点燃.png'); /* 指定按钮的背景图片 */
}

/* 登录按钮按下效果 */
.login-button:active {
    border-image-source: url('../img/素材/按钮-按下.png'); /* 指定按钮的背景图片 */
}